<template>
  <main id="archive" class="page">
    <page-banner :bg_url="page.banner" :text="$route.params.year" />
    <div class="page-category">
      <router-link class="term-item" v-for="(val,k) of page.category" :to="{ name: val.route, params: val.param }" :key="k">{{val.term}}</router-link>
    </div>
    <section class="section-container">
      <div class="section-wrap">
        <div class="empty-data" v-show="isEmpty">
          No data...
        </div>
        <ul class="archive-list">
          <li v-for="(item,index) of list" :key="index">
            <ArchiveCard :item="item"/>
          </li>
        </ul>
      </div>
    </section>
    <Pagination :total="query.pager" :limit="query.limit" :to="query.link" />
  </main>
</template>
<script>
  import {mapGetters} from 'vuex'
  import ArchiveCard from "@/components/ArchiveCard";
  import Pagination from "@/components/Pagination";
  
  export default {
    name: 'Archive',
    components: {
      Pagination,
      ArchiveCard
    },
    data() {
      return {
        page: {
          banner: {'background-image': `url(${require('@/assets/img/archive.jpg')})`},
          category: [
            {
              route: 'Archive',
              param: {year: 2019},
              term: '2019',
            },{
              route: 'Archive',
              param: {year: 2017},
              term: '2017',
            },{
              route: 'Archive',
              param: {year: 2015},
              term: '2015',
            },{
              route: 'Archive',
              param: {year: 2013},
              term: '2013',
            }
          ],
        },
        query: {
          limit: 12,
          pager: 1,
          link: []
        },
        list: [],
        isEmpty: false,
      }
    },
    computed: {
      ...mapGetters(['archive']),
    },
    created() {
      this.fetchList()
    },
    methods: {
      fetchList() {
        this.list = this.archive.filter(n => n.year === Number(this.$route.params.year))
        if (this.list.length > this.query.limit) {
          this.isEmpty = false;
          // 分页
          const start = this.query.pager === 1? 1 : (this.query.pager-1) * this.query.limit
          const end   = start + this.query.limit - 1
          let archives = this.list;
          this.query.pager = Math.ceil(archives.length / this.query.limit)
          for (let i = 0; i< this.query.pager; i++) {
            this.query.link[i] = { name: 'Archive', params: {year: this.$route.params.year, page: i+1} }
          }
          this.list = archives.splice(start,end)

        } else if (this.list.length < this.query.limit || this.list.length < 1) {
          this.isEmpty = true
          this.query.pager = 1
          this.query.link[0] = { name: 'Archive', params: {year: this.$route.params.year, page: 1} }
        }
      }
    },
    watch: {
      '$route': {
        handler: 'fetchList',
        deep: true,
      }
    }
  }
</script>
<style lang="scss">
  main#archive {
    .section-container {
      .section-wrap {
        .archive-list {
          li {
            display: inline-block;
            vertical-align: top;
            width: 33.3%;
            &:nth-of-type(n+4) {
              margin-top: 50px;
            }
          }
        }
      }
    }
  }
</style>
